<template>
	<div class="yh_content foSi14 poRel">
		<div class="btn-group_top">
			<el-button type="primary" @click.stop="back" size="small">返回</el-button>
		</div>
		<div class="mar" style="width: 840px;">
			<div class="dis disJuB wid100">
				<div class="dis">
					<div class="mar-right15" style="width: 70px;height: 70px;">
						<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKwML0oRr2ffjzIAiczdyqPteXgQR8Ih5cFRD9RMgFvDms4iaEPQku99XJFkdQ6xhhM863w80Rf4LUg/132" class="wh100 borRad10"/>
					</div>
					<div>
						<div class="dis disAl hei30">
							<div class="mar-right10">倪媛媛</div>
							<svg-icon icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
							<!-- <svg-icon icon-class="son" class="mar0" style="width: 18px;height: 18px;" /> -->
							<div class="coFFF textCen foSi12 borRad5"
								style="background: #48a9f3;padding: 0 6px;height: 18px;line-height: 18px;">子女</div>
						</div>
					</div>
				</div>
				<div class="dis" style="align-items: baseline;">
					<el-button type="info" class="mar-right10" size="small">删除</el-button>
					<el-button type="primary" class="mar0" size="small">编辑</el-button>
				</div>
			</div>
			<div class="mar-top10 hei20 foSi12" style="color: #7c7c7c;">基本信息</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>会员年限</div>
					<div>2天</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>年龄</div>
					<div>21岁</div>
				</div>
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>身高</div>
					<div>178cm</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>生日类型</div>
					<div>阳历</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>生日</div>
					<div>2003-10-01</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>职业</div>
					<div>医生</div>
				</div>
				<div class="item-p item-w  dis disAl disJuB">
					<div>与主会员关系</div>
					<div>子女</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>证件类型</div>
					<div>身份证</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>证件号码</div>
					<div>220111111111111111</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>学历</div>
					<div>本科</div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>所在地区</div>
					<div>河北省唐山市路南区</div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>详细地址</div>
					<div></div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>小区名称</div>
					<div></div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>入会时间</div>
					<div>2024-10-22</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w dis disAl disJuB">
					<div>面容ID</div>
					<div>未设置</div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="mar-top20 hei20 foSi12" style="color: #7c7c7c;">更多资料</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>职业类型</div>
					<div></div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>行为动态</div>
					<div></div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>婚姻情况</div>
					<div></div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>孕产情况</div>
					<div></div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>性格特征</div>
					<div></div>
				</div>
				<div class="item-p item-w dis disAl disJuB">
					<div>收入情况</div>
					<div></div>
				</div>
			</div>
			<div class="item-l wid100 hei42 dis item-bor1">
				<div class="item-p item-w item-bor dis disAl disJuB">
					<div>爱好</div>
					<div></div>
				</div>
				<div class="item-p item-w dis disAl disJuB"></div>
			</div>
			<div class="item-l wid100 hei42 dis dis disAl item-p item-bor1">
				<div style="width: 100px;">备注</div>
				<div></div>
			</div>
			<div class="mar-top30">
				<div class="hei20 foSi12" style="color: #7c7c7c;">主会员</div>
				<div class="mar-bott10 poRel item-l hei86 cuPo memberDiv" @click="tiaozhuan('/member/memberDetail?id=0')">
					<div class="dis disAl">
						<img src="https://img.keepyoga.com/1729561245_8451_croppedImage.png@q_80" class="borRad50" style="width: 30px;height: 30px;">
						<div style="margin: 0 8px 0 10px;">text2</div>
						<svg-icon icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
						<!-- <svg-icon icon-class="son" class="mar0" style="width: 18px;height: 18px;" /> -->
					</div>
					<div class="mar-top10">13644302689</div>
				</div>
			</div>
			<div class="dis mar-top10">
				<el-tabs v-model="nav_index" :stretch="true" style="width: 100%" @tab-click="navChange">
					<el-tab-pane label="关联卡信息" name="first">
						<div class="dis item-l">
							<div class="wid25 item-bor dis disAl disJuC">
								<div>
									<div class="poRel" style="width: 124px;height: 76px;">
										<span class="badge-macrd-s1 badge-common"></span>
										<img loading="lazy" src="https://cloud.keepyoga.com/static/img/card-type-s1.png" alt="">
									</div>
									<div class="textCen cuPo mar-top10" style="color: #48a9f3;">查看详情</div>
								</div>
							</div>
							<div class="wid85">
								<div class="wid100 dis item-l item-bor1">
									<div class="item-w item-bor item-p hei42 dis disAl disJuB">
										<div>卡名称</div>
										<div>298中秋卡小班</div>
									</div>
									<div class="item-w item-p hei42 dis disAl disJuB">
										<div>卡号</div>
										<div>202410170001</div>
									</div>
								</div>
								<div class="wid100 dis item-l item-bor1">
									<div class="item-w item-bor item-p hei42 dis disAl disJuB">
										<div>卡余额</div>
										<div>5次</div>
									</div>
									<div class="item-w item-p hei42 dis disAl disJuB"></div>
								</div>
								<div class="wid100 dis item-l item-bor1">
									<div class="item-w item-bor item-p hei42 dis disAl disJuB">
										<div>售卡金额</div>
										<div>￥298元</div>
									</div>
									<div class="item-w item-p hei42 dis disAl disJuB">
										<div>有效期</div>
										<div>2024-10-17 至 2024-12-16</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="体测数据" name="fitness">
						<div>
							<div class="mar-bott5" style="text-align: right;">
								<el-button type="success" style="background: #41c3a8;border-color: #41c3a8;" size="small">新增</el-button>
							</div>
							<el-table :data="tableData" stripe style="width: 100%">
								<div slot="empty" class="m-empty-box">
									<div class="mar" style="width: 168px;height: 180px;">
										<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
									</div>
									<div class="title">暂无数据</div>
								</div>
								<el-table-column prop="date" label="体测ID" />
								<el-table-column prop="name" label="带测老师" />
								<el-table-column prop="address" label="创建时间" />
								<el-table-column prop="address" label="异常/总数量" />
								<el-table-column :label="$t('table.actions')" align="center" width="180"
									class-name="small-padding fixed-width">
									<template slot-scope="scope">
										<div class="dis disAl">
											<div class="dis disAl cuPo mar-rgght10">
												<i class="el-icon-delete"
													style="color: rgb(25, 165, 88); font-size: 20px" />删除
											</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-tab-pane>
					<el-tab-pane label="班课信息" name="class">
						<el-table :data="tableData" stripe style="width: 100%">
							<div slot="empty" class="m-empty-box">
								<div class="mar" style="width: 168px;height: 180px;">
									<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
								</div>
								<div class="title">暂无数据</div>
							</div>
							<el-table-column prop="date" label="班级封面" width="150"/>
							<el-table-column prop="name" label="班级名称" />
							<el-table-column prop="address" label="收费金额" />
							<el-table-column prop="address" label="已消耗课时" />
							<el-table-column prop="address" label="剩余课时" />
							<el-table-column prop="address" label="总课时" />
							<el-table-column prop="address" label="报班时间" />
							<el-table-column prop="address" label="状态" />
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo
	} from '@/api/member'
	export default {
		name: 'memberOfFamilyDetail',
		components: {
			Pagination
		},
		data() {
			return {
				tableData: [],
				nav_index: 'first'
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			var xuanList = [{
				name: '成员详情',
				url: '/member/memberOfFamilyDetail?id='+this.id,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
		},
		methods: {
			tiaozhuan(url){
				this.$nextTick(() => {
					this.$router.replace({
						path: url
					})
				})
			},
			shuaVisibleClick(){
				this.shuaVisible = 0
			},
			navChange(e) {
				console.log(e)
			},
			back() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.btn-group_top {
	    text-align: right;
	}
	.side-card-list .card-type .badge-common {
	    position: absolute;
	    width: 74px;
	    height: 74px;
	    overflow: hidden;
	    top: -5px;
	    right: -5px;
	}

	.badge-macrd-s1 {
	    background-position: -20px -20px !important;
	}
	.badge-macrd-s2 {
	    background-position: -103px  -20px !important;
	}
	.badge-macrd-s3 {
	    background-position: -186px  -20px !important;
	}
	.badge-macrd-s4 {
	    background-position: -269px  -20px !important;
	}
	.badge-macrd-s5 {
	    background-position: -352px  -20px !important;
	}
	.badge-macrd-s6 {
	    background-position: -435px  -20px !important;
	}
	.badge-macrd-s7 {
	    background-position: -518px  -20px !important;
	}
	.badge-macrd-s8 {
	    background-position: -701px  -20px !important;
	}

	.badge-common {
	    position: absolute;
	    width: 60px;
	    height: 60px;
	    top: -4px;
	    left: 68px;
	    background: url('../../../icons/png/icon-mcard-status.png') no-repeat;
	}
	.gxDiv{
		background: #48a9f3;
		padding: 0 6px;
		min-width: 24px;
		height: 18px;
		line-height: 18px;
		display: inline-block;
	}
	.memberDiv{
		padding: 14px 0 0 14px;
		width: 160px;
		margin-right: 10px;
	}

	li:nth-child(5n+5) .memberDiv {
	    margin-right: 0;
	}
</style>
